<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<title>登录界面·欢迎您</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<link rel="stylesheet" href="commonCSS/commonInitialize.css" />
	<link rel="stylesheet" href="commonCSS/htmlFontSize.css" />
	<link rel="stylesheet" href="commonCSS/commonDisplayFlex.css" />
	<link rel="stylesheet" href="css-userLogin/userLogin.css" />
	<link rel="stylesheet" href="css-userLogin/graphy-code.css" />
	
	
</head>
<body>
	
	<div id="user-login-area">
		<nav id="nav-bar" class="display-flex flex-justify-center flex-align-items-center">
			<div class="nav-div">验证码登录</div>
			<div class="nav-div">账号密码登录</div>
			<div class="nav-div">扫码登录</div>
		</nav>
		<ul class="display-flex flex-justify-center flex-align-items-start">
			<li id="login-form-li1">
				<!--手机验证码登录：下方要配备问题：手机收不到验证码？验证码登录即代表注册 同意隐私条约，-->
				<form action="http://www.baidu.com" id="phone-valid-code-login-form">
					<h2>手机验证码登录</h2>
					<div class="phone-number">
						<label class="display-flex flex-justify-center flex-align-items-center">
							<input type="text" autofocus class="phone-number-input" placeholder="登录手机号输入" />
							<div>◀ 手机号</div>
						</label>
						<div class="remind-info"></div> <!--存放提示信息的盒子-->
					</div>
					<div class="graphy-code">
						<label class="display-flex flex-justify-center flex-align-items-center">
							<input type="text" value="" class="graphy-code-input" placeholder="图形验证码" />
							<div id="phone-number-graphy-code" class="display-flex flex-justify-center flex-align-items-center">
								<div class="letter-code"></div>
								<div class="letter-code"></div>
								<div class="letter-code"></div>
								<div class="letter-code"></div>
							</div>
						</label>
					</div>
					<div class="valid-code">
						<label class="display-flex flex-justify-center flex-align-items-center">
							<input type="text" class="valid-code-input" placeholder="登手机验证码输入" />
							<div>◀ 验证码</div>
						</label>
						<div class="remind-info"></div> <!--存放提示信息的盒子-->
					</div>
					<div class="submit-btn-div not-allowed-submit"><input type="button" disabled="disabled" value="现 在 登 录" /></div>
					<div id="valid-code-help-div" class="display-flex flex-justify-space-between align-items-center">
						<a href="">
							<strong>
								验证码登录即代表注册
							</strong>
						</a>
						<a href="">
							<strong>
							手机收不到验证码？
							</strong>
						</a>
					</div>
				</form>
			</li>
			<!--第二个登录方式：账号密码登录-->
			<li id="login-form-li2">
				<!--
					账号密码登录。已经注册了，有账号密码--需要手机号为用户名账号，
					配备相应的提示问题：忘记密码？
				-->
				<!--手机验证码登录：下方要配备问题：手机收不到验证码？验证码登录即代表注册 同意隐私条约，-->
				<form action="http://www.baidu.com" id="phone-number-login-form">
					<h2>账号密码登录</h2>
					<div class="phone-number">
						<label class="display-flex flex-justify-center flex-align-items-center">
							<input type="text" autofocus class="phone-number-input" placeholder="登录手机号输入" />
							<div>◀ 手机号</div>
						</label>
						<div class="remind-info"></div> <!--存放提示信息的盒子-->
					</div>
					<div class="graphy-code">
						<label class="display-flex flex-justify-center flex-align-items-center">
							<input type="text" value="" class="graphy-code-input" placeholder="图形验证码" />
							<div id="password-graphy-code" class="display-flex flex-justify-center flex-align-items-center">
								<div class="letter-code"></div>
								<div class="letter-code"></div>
								<div class="letter-code"></div>
								<div class="letter-code"></div>
							</div>
						</label>
					</div>
					<div class="password">
						<label class="display-flex flex-justify-center flex-align-items-center">
							<input type="text" class="password-input" placeholder="您的密码输入" />
							<div>◀ 密码</div>
						</label>
						<div class="remind-info"></div> <!--存放提示信息的盒子-->
					</div>
					<div class="submit-btn-div not-allowed-submit"><input type="button" disabled="disabled" value="现 在 登 录" /></div>
					<div id="password-help-div" class="display-flex flex-justify-space-between align-items-center">
						
						<a href="">
							<strong>
							忘记密码？
							</strong>
						</a>
					</div>
				</form>
			</li>
			<!--第三个登录方式：扫码登录-->
			<li id="login-scan-img">
				<img src="img-first-page/hll_user_20191216.png" alt="" />
			</li>
		</ul>
		<div class="protocol">
			登录即同意
			<a href=""><ins>《用户协议》</ins></a>
			及
			<a href=""><ins>《隐私协议》</ins></a>
			
		</div>
		<div id="login-by-other-accounts" class="display-flex flex-wrap flex-justify-space-around">
			<h2>其他账号登录</h2>
			<div class="login-account">
				<a href="https://m.jiaoyimao.com/session/loginByUcc?redirectUrl=https%3A%2F%2Fm.jiaoyimao.com%2Fgoods%2F1612025336484726.html%3Frecid%3D2980b0e816114286b9c00207a3f8e5be60166b50">
					<img src="https://img.alicdn.com/tps/i3/T1OjaVFl4dXXa.JOZB-114-114.png" height="100%" width="auto" alt="" />
					<div>淘宝账号</div>
				</a>
			</div>
			<div class="login-account">
				<a href="">
					<img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3493624719,1506955080&fm=26&gp=0.jpg" alt="" />
					<div>微信账号</div>
				</a>
			</div>
			
		</div>
	</div>
	<script src="js-userLogin/graphy-code.js"></script>
	<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
	<script type="text/javascript">
		let phonePattern = new RegExp(/1[3456789]\d{9}/, "gi");
		jQuery.noConflict();
		jQuery(function($) {
			resizeLeft();
			function resizeLeft() {
				$(".nav-div").click(function() {
					let thisIndex = $(this).index();
					$("#user-login-area > ul").stop(true).animate(
						{
							left: -$("#user-login-area > ul").children("li").eq(thisIndex).get(0).offsetLeft + "px"
						},
						"slow", "swing"
					);
					
					$(this).css({
						background: "#00CCFF",
						color: "white"
					}).siblings().css({
						background: "white",
						color: "#008CFF"
					});
					//$(this).addClass("nav-div-active").siblings().removeClass("nav-div-active");
				});
				console.dir(666);
			}
			
			$(window).resize(function() {
				$(".nav-div").first().click();
				
			});
			let codeBlurValid = null;
			let passwordBlurValid = null;
			$("#login-form-li1 .submit-btn-div").click(function() {
				$("#phone-valid-code-login-form").submit();
			});
			$("#login-form-li2 .submit-btn-div").click(function() {
				$("#phone-number-login-form").submit();
			});
			
			$("#login-form-li1 label input").blur(codeBlurValid = function() {
				validLogin($("#login-form-li1"), phonePattern, $("#login-form-li1 .phone-number-input"));
			});
			$("#login-form-li2 label input").blur(passwordBlurValid = function() {
				validLogin($("#login-form-li2"), phonePattern, $("#login-form-li2 .phone-number-input"));
			});
			function validLogin(obj1, pattern, inputValues) {
				try{
					if(obj1 && obj1.children(".submit-btn-div") && inputValues && pattern instanceof RegExp) {
						let inputValue1 = inputValues.val();
						let inputValue2 = inputValues.parent().parent("div").siblings().find("input").val();
						if(pattern.test(inputValue1) && inputValue2.length === 6) {
							// 符合登录条件、要求
							obj1.find(".submit-btn-div")
							.removeClass("not-allowed-submit")
							.children("input")
							.prop("disabled", false);
							console.log("验证通过", obj1.find(".submit-btn-div")
							.children("input")
							.attr("disabled"));
							return;
						}
						// 不符合登录条件、要求
						obj1.find(".submit-btn-div")
						.addClass("not-allowed-submit")
						.children("input")
						.prop("disabled", "disabled");
						console.log("没通过", obj1.children(".submit-btn-div")
							.find("input")
							.attr("disabled"));
						return;
					}
					
				}catch(err){
					alert(err.message);
				}
				
			}
			
			//验证图形码输入的准确性
			$("#phone-valid-code-login-form .graphy-code-input").blur(function() {
				let flag = validGraphyCode($(this).val(), $("#phone-number-graphy-code").text());
				if(flag) {
					alert(123);
				}
			});
			$("#phone-number-login-form .graphy-code-input").blur(function() {
				let flag = validGraphyCode($(this).val(), $("#password-graphy-code").text());
				if(flag) {
					alert(123);
				}
			});
			function validGraphyCode(graphyCodeInputValue, graphyCode) {
				if(graphyCodeInputValue.trim()) {
					if(graphyCodeInputValue === (graphyCode.replace(/\W/gi, ""))) {
						return true;
					}
					return false;
				}
				return false;
				
			}
			
		});
		
	</script>
</body>
</html>
